<template>
	<div class="my-select">
		<label for="code" class="myfont">{{ label }}</label>
		<div class="select-box" @click="picker">{{ info.name || placeholder }}</div>
	</div>
</template>

<script lang="ts">
import Vue from 'vue';

const fjList = [
	{ text: '市局领导', value: '33010000' },
	{ text: '智慧警务办', value: '33010010' },
	{ text: '政治部', value: '33010020' },
	{ text: '情指中心', value: '33010030' },
	{ text: '警务督察支队', value: '33010040' },
	{ text: '法制支队', value: '33010050' },
	{ text: '治安支队', value: '33010051' },
	{ text: '基层基础管理支队', value: '33010052' },
	{ text: '网警分局', value: '33010053' },
	{ text: '出入境管理局', value: '33010054' },
	{ text: '禁毒支队', value: '33010055' },
	{ text: '刑侦支队', value: '33010056' },
	{ text: '上城分局', value: '33010200' },
	{ text: '下城分局', value: '33010300' },
	{ text: '拱墅分局', value: '33010500' },
	{ text: '江干分局', value: '33010400' },
	{ text: '西湖分局', value: '33010600' },
	{ text: '滨江分局', value: '33010800' },
	{ text: '钱塘分局', value: '33011100' },
	{ text: '景区分局', value: '33019900' },
	{ text: '萧山分局', value: '33010900' },
	{ text: '余杭分局', value: '33011000' },
	{ text: '富阳市局', value: '33018300' },
	{ text: '桐庐县局', value: '33012200' },
	{ text: '临安分局', value: '33018500' },
	{ text: '建德市局', value: '33018200' },
	{ text: '淳安县局', value: '33012700' }
];
export default Vue.extend({
	name: 'MySelect',
	props: {
		info: Object,
		label: String,
		placeholder: String,
		type: {
			type: String,
			default: 'text'
		}
	},
	model: {
		prop: 'info',
		event: 'change'
	},
	beforeDestroy() {
		window.fjPicker = null;
	},
	methods: {
		picker() {
			const self = this;
			if (!window.fjPicker) {
				window.fjPicker = this.$createPicker({
					title: '选择分局',
					data: [fjList],
					onSelect: selectHandle
				});
			}
			window.fjPicker.show();

			function selectHandle(val: any, index: any, txt: any) {
				self.$emit('change', {
					name: txt[0],
					code: val[0]
				});
			}
		}
	}
});
</script>

<style lang="less" scoped>
.my-select {
	display: flex;
	align-items: center;
	color: #fff;
	label {
		font-size: 29px;
		margin-right: 10px;
	}
	.select-box {
		width: 480px;
		height: 78px;
		background: url('~@/static/images/input.png') 0 0 no-repeat;
		background-size: 480px 78px;

		padding: 0 20px;
		display: flex;
		align-items: center;
		font-size: 25px;
	}
}
</style>
